<template>
  
  <div class="paysuccess">
    <div v-show="!isLoading" class="success">
      <h3 v-if="isSuccess">
        <img src="../../assets/images/right.png" width="48" height="48">
        恭喜您，支付成功啦！
      </h3>
      <h3 v-else>
        <img src="../../assets/images/right.png" width="48" height="48">
        支付未成功！
      </h3>
      <div class="paydetail">
        <p class="button">
          <a href="/myOrder" class="btn-look">查看订单</a>
          <a href="/search" class="btn-goshop">继续购物</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayResult',
  data () {
    return {
      // 是否加载中：true:正在获取 false：获取完毕
      isLoading: true,
      isSuccess: true
    }
  },
  async mounted () {
    const { ok } = await this.$store.dispatch("payment/getQueryPayStatusAsync", this.$route.query.orderId);
    this.isSuccess = ok;
    this.isLoading = false;
  }
}
</script>

<style lang="less" scoped>
.paysuccess {
  margin: 20px auto;
  padding: 25px;
  border: 1px solid rgb(211, 211, 211);
  width: 1200px;
  width: 1148px;
  .success {
    width: 500px;
    margin: 0 auto;
    h3 {
      margin: 20px 0;
      font-weight: 700;
      font-size: 20px;
      line-height: 30px;
      img {
        max-width: 100%;
        vertical-align: middle;
        border: 0;
        margin-right: 14px;
      }
    }
    .paydetail {
      margin-left: 66px;
      font-size: 15px;
      .button {
        margin: 30px 0;
        line-height: 26px;
        a {
          display: inline-block;
          box-sizing: border-box;
          text-align: center;
          vertical-align: middle;
          cursor: pointer;
          border-radius: 2px;
          user-select: none;
          font-size: 18px;
          padding: 4px 20px;
          line-height: 22px;
          text-decoration: none;
          &.btn-look {
            margin-right: 13px;
            color: #fff;
            background-color: #e1251b;
            border: 1px solid #e1251b;
          }
          &.btn-goshop {
            color: #666;
            background-color: #eee;
            border: 1px solid #e1e1e1;
          }
        }
      }
    }
  }
}
</style>